<!--
 * @Author: [you name]
 * @Date: 2021-09-22 14:16:56
 * @LastEditors: [you name]
 * @LastEditTime: 2021-10-05 00:17:04
 * @Description: 
-->
<template>
  <div>
    <Header></Header>

    <!-- {{articleId}} -->
    <!-- {{articleData}} -->
    <div class="content">
      <div class="wrapper1">
        <div class="bread">
          <div class="icon">
            <img src="https://news.hnu.edu.cn/images/hnnews_41.png" alt="" />
          </div>
          <div class="bread_right">
            <el-breadcrumb>
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item
                ><a @click="toZonghe"
                  >{{ articleData.category.name }}
                </a></el-breadcrumb-item
              >
              <el-breadcrumb-item>正文</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>

        <div class="title">
          <h1>{{ articleData.title }}</h1>
        </div>

        <div class="artDate">
          <div class="time">
            时间：{{ Number(articleData.publishTime) | fmtDate }}
          </div>
          <div class="readTime">浏览次数：{{ articleData.readTimes }}</div>
        </div>

        <!-- 文章主体内容 -->
        <div class="mainContent" v-html="articleData.content">
          {{ articleData.content }}
        </div>
        <!-- 作者 -->
        <div class="author">作者：{{ articleData.baseUser.realname }}</div>


        <!-- 友情链接部分 -->
    <div class="friendLink">
      <div class="wrapper2">
        <div class="linkContent">
          <!-- 上面部分 -->
          <div class="linkTop">
            <div class="lian">
              友情链接
              <div class="lianIcon"></div>
            </div>
          </div>
          <!-- 下面部分 -->
          <div class="linkBottom">
            <li><a href="https://www.hnu.edu.cn/">湖南大学</a></li>
            <li><a href="http://admi.hnu.edu.cn/">湖南大学招生信息网</a></li>
            <li><a href="http://scc.hnu.edu.cn/">湖南大学就业网</a></li>
            <li><a href="http://ylsy.hnu.edu.cn/">湖南大学岳麓书院 </a></li>

            <!-- 四个图标 -->
            <div class="mainIcon">
              <div class="icon1">
                <a
                  href="https://weibo.com/hunanuniversity?refer_flag=2725420000_weiboxiu&is_hot=1"
                  ><img src="https://news.hnu.edu.cn/images/ico1.png" alt=""
                /></a>
              </div>
              <div class="icon2">
                <a href=""
                  ><img src="https://news.hnu.edu.cn/images/ico2.png" alt=""
                /></a>
              </div>
              <div class="icon3">
                <a
                  href="https://www.douyin.com/user/MS4wLjABAAAAuhWu55VCSTU90lyS43EBdMhpkJOjIglBn10B9EvIiI4?enter_method=search_result&extra_params=%7B%22search_id%22%3A%2220211002230738010133028142243558BD%22%2C%22search_result_id%22%3A%2258320597826%22%2C%22search_keyword%22%3A%22%E6%B9%96%E5%8D%97%E5%A4%A7%E5%AD%A6%22%2C%22search_type%22%3A%22user%22%7D&enter_from=search_result"
                  ><img src="https://news.hnu.edu.cn/images/ico3.png" alt=""
                /></a>
              </div>
              <div class="icon4">
                <a href="https://space.bilibili.com/391952271"
                  ><img src="https://news.hnu.edu.cn/images/ico4.png" alt=""
                /></a>
              </div>
            </div>

            <!-- 微信二维码 -->
            <div class="erweima">
              <img src="https://news.hnu.edu.cn/images/ico6.jpg" alt="">
            </div>

          </div>
        </div>
      </div>
    </div>

      </div>

      <!-- 底部 -->
    <div class="footer">
      <div class="footerMain">
        <ul>
          <li>版权所有：湖南大学党委宣传部（新闻办公室)</li>
          <li>技术支持：湖南大学互联网信息服务研究中心</li>
          <li>热线电话：88822804 | 88823984 </li>
          <li>邮箱：news@hnu.edu.cn</li>
        </ul>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import Header from "./components/Header.vue";
import { get } from "../utils/request";
export default {
  components: {
    Header,
  },
  data() {
    return {
      articleData: {},
    };
  },
  methods: {
    //跳转到综合要闻
    toZonghe() {
      this.$router.push({
        path: "/list",
      });
    },
  },
  created() {
    this.articleData = this.$route.query;
  },
};
</script>

<style lang="scss" scoped>
.content {
  .wrapper1 {
    .bread {
      height: 20px;
      width: 100%;
      padding: 20px 0 0 20px;
      .icon {
        display: inline-block;
      }
      .bread_right {
        display: inline-block;
        margin-left: 20px;
      }
    }
    .title {
      height: 32px;
      margin-top: 60px;
      text-align: center;
      line-height: 32px;
      color: #000;
      font-style: 24px;
    }
    .artDate {
      height: 24px;
      margin-top: 20px;
      .time {
        display: inline-block;
        margin-left: 480px;
      }
      .readTime {
        display: inline-block;
        margin-left: 30px;
      }
    }
    .mainContent {
      font-size: 18px;
      margin-top: 20px;
      line-height: 2em;
    }
    .author {
      height: 140px;
      width: 100%;
      text-align: right;
      font-size: 17px;
      line-height: 5em;
      color: #666;
    }

    // 友情链接部分
.friendLink {
  .wrapper2 {
    .linkContent {
      height: 150px;
      width: 100%;
      // margin-top: 30px;
      .linkTop {
        height: 50px;
        font-size: 18px;
        line-height: 50px;
        border-bottom: 1px solid #d11d29;
        .lian {
          margin-left: 10px;
          color: #b1040e;
          width: 100px;
          text-align: center;
          border-bottom: 2px solid #d11d29;
          box-sizing: border-box;
          position: relative;
          .lianIcon {
            height: 0;
            width: 0;
            border: 5px solid transparent;
            border-bottom: 5px solid #b1040e;
            position: absolute;
            top: 40px;
            left: 46px;
          }
        }
      }
      .linkBottom {
        height: 95px;
        position: relative;
        li {
          width: 200px;
          float: left;
          height: 95px;
          line-height: 95px;
          margin-left: 10px;
          color: #b1040e;
        }

        //四个图标
        .mainIcon {
          margin-top: 20px;
          width: 250px;
          height: 52px;
          position: absolute;
          right: 0;
          display: flex;
        }
        .icon1 {
          flex: 1;
          img {
            width: 55px;
          }
        }
        .icon2 {
          flex: 1;
          img {
            width: 55px;
          }
         
        }
        .icon2 a img:hover .erweima{
          display: block;
        }
        .icon3 {
          flex: 1;
          img {
            width: 55px;
          }
        }
        .icon4 {
          flex: 1;
          img {
            width: 55px;
          }
        }
      }
       .erweima{
            display: inline-block;
            width: 129px;
            height: 129px;
            background-color: cyan;
            margin-top: 75px;
            margin-left: 175px;
            display: none;
          }

    }
  }
}
  }
 

  // 底部
.footer {
  margin-top: 40px;
  height: 200px;
  width: 100%;
  background-color: rgb(212, 11, 11);
  background: url(https://www.hnu.edu.cn/images/hn-foot-bg.jpg);
  position: relative;
  .footerMain{
    width: 85%;
    height: 50px;
    // background-color: rgb(41, 211, 78);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -618.5px;
    margin-top: -30px;
    ul{
      li{
        float: left;
        // background-color: rgb(82, 52, 255);
        color:#fff;
        line-height: 50px;
      }
      li:nth-child(n+2){
        margin-left: 90px;

      }
    }
  }
}
}
</style>